<template>
  <transition
    enter-active-class="fade"
    enter-to-class="show"
    leave-from-class="show"
    leave-active-class="fade"
    @before-enter="beforeEnter"
    @after-leave="afterLeave"
  >
    <div class="modal-backdrop vb-modal-backdrop" v-show="show" ref="modalBackdrop"></div>
  </transition>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import { DomUtil } from "../../utils";
import Modal from "./useModal";
const DEFAULT_MODAL_ZINDEX = "1040";
export default defineComponent({
  setup() {
    const show = ref(false);
    const modalBackdrop = ref();
    let hasScrollbar = false;
    watch(show, () => {
      if (!Modal.zIndex) {
        Modal.zIndex = DomUtil.getStyle(modalBackdrop.value, "z-index") || DEFAULT_MODAL_ZINDEX;
      }
    });
    return {
      show,
      modalBackdrop,
      beforeEnter() {
        hasScrollbar = DomUtil.bodyHasScrollbar();
        if (hasScrollbar) {
          const style = document.body.style;
          style.overflow = "hidden";
          style.paddingRight = `${DomUtil.getScrollbarWidth()}px`;
        }
      },
      afterLeave() {
        if (hasScrollbar) {
          const style = document.body.style;
          style.overflow = "";
          style.paddingRight = "";
        }
      },
    };
  },
});
</script>
<style>
.vb-modal-backdrop {
  display: block;
  opacity: 0.5;
}
</style>
